<template>
  <div class="classify">
    <van-nav-bar
      title="心理测评"
      fixed
      left-arrow
      @click-left="onClickLeft"
    ></van-nav-bar>
    <van-tabs
      v-model:active="activeName"
      :before-change="beforeChange"
      swipeable
      sticky
    >
      <van-tab
        v-for="(item, index) in categoryOptions"
        :key="index"
        :title="item.typeName"
        :name="item.projectGaugeTypeId"
      >
        <div style="margin-top: 10px">
          <Content
            v-for="art in itemListObj[item.projectGaugeTypeId]"
            :key="art.id"
            :project="art"
            @click="toEvaluation(art.projectId)"
          ></Content>
          <div
            v-if="
              itemListObj[item.projectGaugeTypeId] &&
              itemListObj[item.projectGaugeTypeId].length == 0
            "
            class="blank"
            style="text-align: center"
          >
            <img class="none" src="../../assets/icon/none.png" alt="" />
            <div class="van-list__finished-text">暂无您可测的信息</div>
          </div>
          <div v-else style="text-align: center">
            <div class="van-list__finished-text">
              {{ info }}
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <StageDialog
      v-model:visible="show"
      v-model:active="active"
      @onItemClick="onItemClick"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'
import StageDialog from '/@/components/StageDialog.vue'
import { geMeasureList } from '/@/api/home/home'
import { Dialog } from 'vant'
import Content from './content.vue'
import { useClassify, useMoreInfo, useNavTo } from './classify'
const guestTenantId = '142417' //游客租户

export default defineComponent({
  components: {
    StageDialog,
    Content,
  },
  setup() {
    const show = ref(false)

    const active = ref('学前')

    const router = useRouter()

    const activeIndex = ref(0)

    const query = router.currentRoute.value.query

    const { fetchFlag, info } = useMoreInfo()

    const { state, categoryOptions, activeName, ctr_user, itemListObj } =
      useClassify(query, fetchFlag)

    const { onClickLeft, onClickRight } = useNavTo()

    const onLoad = () => {
      const activeTab = activeName.value
      if (state.loading[activeTab]) {
        state.loading[activeTab] = false
        const tenantId =
          ctr_user && ctr_user.tenantId ? ctr_user.tenantId : guestTenantId
        fetchFlag.value = true
        geMeasureList(state.currentPage[activeTab], state.pageSize, {
          gaugeTypeId: activeTab,
          status: 1,
          tenantId: tenantId,
        }).then((res) => {
          fetchFlag.value = false

          const records = res.data.data.records
          if (records && records.length > 0) {
            itemListObj[activeTab] = [].concat.apply(
              itemListObj[activeTab],
              records
            )
            state.currentPage[activeTab]++
          } else {
            state.finished[activeTab] = true
          }
          state.loading[activeTab] = false
        })
      }
    }

    const onRefresh = () => {
      const activeTab = activeName.value
      state.finished[activeTab] = false
      state.loading[activeTab] = true
      state.currentPage[activeTab] = 1
      itemListObj[activeTab] = []
      onLoad()
    }

    return {
      show,
      active,
      categoryOptions,
      itemListObj,
      activeName,
      state,
      onLoad,
      onRefresh,
      info,
      fetchFlag,
      onItemClick(item: any, index: number) {
        //选择阶段
        show.value = false
        activeIndex.value = index
      },
      onClickLeft,
      onClickRight,
      toEvaluation(id: string) {
        if (ctr_user.tenantId && ctr_user.tenantId != 'undefined') {
          router.push({
            name: 'Details',
            query: {
              projectId: id,
              gaugeTypeId: activeName.value,
            },
          })
        } else {
          Dialog.confirm({
            title: '温馨提示',
            message: '您当前未登录，确认登录后可进行测评！',
          })
            .then(() => {
              router.push({
                name: 'Login',
                params: {
                  stage: activeIndex.value,
                },
              })
              sessionStorage.setItem('homTip', 'homTip')
            })
            .catch(() => {})
        }
      },
      beforeChange(projectGaugeTypeId: string) {
        return new Promise((resolve) => {
          if (projectGaugeTypeId) {
            const tenantId =
              ctr_user && ctr_user.tenantId ? ctr_user.tenantId : guestTenantId
            fetchFlag.value = true

            geMeasureList(1, 100, {
              gaugeTypeId: projectGaugeTypeId,
              status: 1,
              tenantId: tenantId,
            }).then((res) => {
              fetchFlag.value = false
              itemListObj[projectGaugeTypeId] = res.data.data.records
            })
          }
          resolve(true)
        })
      },
    }
  },
})
</script>

<style lang="less" scoped>
.classify {
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  padding-top: 45px;
  padding-bottom: 50px;

  /deep/ .van-tab {
    font-size: 15px;
  }

  /deep/ .van-tab--active {
    color: #0387cf;
  }

  /deep/ .van-tabs__line {
    display: none;
  }
}

.blank {
  margin-top: 25vh;

  .none {
    width: 110px;
  }
}
</style>
